<template>
  <div>
    <el-button @click="sonIncrement">父组件调用子组件 自增长</el-button>
    <el-button @click="sonAdd">父组件调用子组件 特添加</el-button>
    <first-son :increLocking="increLock" ref="first"></first-son>
    <el-button @click="sonIncrement2"
      >父组件调用子组件 自增长 bind绑定watch观察</el-button
    >
    <el-button @click="sonAdd2"
      >父组件调用子组件 特添加 emit on 异步事件</el-button
    >
    <div>
      <button id="abc" ref="def">label</button>
      <button @click="sss">go</button>
      <button @click="sss2">go2</button>
    </div>
    <div class="second-father">
      <div>
        <template v-for="(e, i) in contentsEx">
          <el-button :key="i">
            {{ e }}
          </el-button>
        </template>
        <el-button @click="incrementEx">自增Ex</el-button>
      </div>
      <div>
        <template v-for="(e, i) in skillsEx">
          <el-tag :key="i">
            {{ e }}
          </el-tag>
        </template>
        <el-button @click="addEx('dancing')">添加Ex</el-button>
      </div>
    </div>
    <!--    <second-son @post-incre="incrementEx" @post-add="addEx"></second-son>-->
    <second-son
      :some-incre-ex="incrementEx"
      ref="second"
      @post-add="addEx"
      @post-submit="postSubmit"
    ></second-son>
    <third-son>
      <!--      <el-button slot-scope="that" @click="all(that)">HH</el-button>-->

      <template #default="that">
        <el-button @click="all(that)">HH</el-button>
      </template>
      <!--      <el-tag slot="prefix" slot-scope="that"-->
      <!--        >xxxx<span>{{ that.a }}</span></el-tag-->
      <!--      >-->
      <template #prefix="{ a }">
        <el-tag>
          xxxx<span>{{ a }}</span>
        </el-tag>
      </template>
      <!--      <el-tag slot="suffix">yyyy</el-tag>-->
      <template #suffix>
        <el-tag>yyyy</el-tag>
      </template>
    </third-son>
    <el-button>{{ firstName }}</el-button>
    <el-button>{{ lastName }}</el-button>
    <el-button>{{ $store.state.person.name }}</el-button>
    <el-button>{{ $store.state.person.age }}</el-button>
    <el-button @click="$store.dispatch('axiosName', 'wang qing')"
      >dispatchAction</el-button
    >
    <el-button>{{ $store.state.bill.info }}</el-button>
    <el-button @click="$store.commit('changeInfo', 'IIIIII')">change</el-button>
  </div>
</template>
<script>
import FirstSon from "@/components/FirstSon";
import SecondSon from "@/components/SecondSon";
import ThirdSon from "@/components/ThirdSon";
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
// import { mapState } from "vuex";
export default {
  name: "FatherView",
  components: {
    ThirdSon,
    SecondSon,
    FirstSon,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      increLock: false,
      addLock: false,
      contentsEx: [1, 2, 3],
      skillsEx: ["football", "basketball"],
    };
  },
  computed: {
    // ...mapState(["firstName", "lastName"]),
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    firstName() {
      return this.$store.state.firstName;
    },
    lastName() {
      return this.$store.state.lastName;
    },
  },
  created() {},
  mounted() {
    // this.$on("dddd")
    /*<second-son @post-incre="incrementEx" */
    this.$refs.second.$on("post-incre", this.incrementEx);
    console.log(this.$store);
  },
  beforeDestroy() {
    this.$refs.second.$off("post-incre");
  },
  methods: {
    sampleM() {},
    show() {
      this.$message.success("father go");
    },
    all(that) {
      this.show();
      that.walk();
      console.log(that.a);
      console.log(that.sampleD);
    },
    postSubmit(a, b) {
      console.log(a);
      this.skillsEx.push(a.username);
      console.log(b);
    },
    sonIncrement() {
      this.$refs.first.increment();
    },
    sonIncrement2() {
      this.increLock = !this.increLock;
    },
    sonAdd() {
      this.$refs.first.add("hiking");
    },
    sonAdd2() {
      this.$refs.first.$emit("some-queue", "hiking");
      this.$refs.first.$emit("post-submit", "hiking");
      this.$refs.first.$emit("prev-click", "hiking");
      // this.$refs.first.someQueue("hiking");
      console.log("xxx");
    },
    sss() {
      let s = document.getElementById("abc");
      console.log(s);
      s.disabled = true;
    },
    sss2() {
      // let s = this.$refs["def"]
      let s = this.$refs.def;
      console.log(s);
      s.disabled = false;
    },
    incrementEx() {
      this.contentsEx.push(this.contentsEx[this.contentsEx.length - 1] + 1);
      this.$message.warning("==========");
    },
    addEx(skill) {
      skill && this.skillsEx.push(skill);
      console.log("father");
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.first-son {
  border: 4px solid green;
  background-color: #49908b;
}
.second-father {
  background-color: #8e9013;
}
</style>
